<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/index.css" media="all" />
</head>
<body>
	<fieldset class="layui-elem-field">
  	<legend>条件选择</legend>
 	 <div class="layui-field-box">
   		<form action="" class="layui-form layui-form-pane">
   			<div class="layui-form-item" align="center">
   			<div class="layui-inline">
   				<label class="layui-form-label">公告主题</label>
    			<div class="layui-input-inline">
      				<input type="text" name="title"  placeholder="请输入公告主题" autocomplete="off" class="layui-input">
    			</div>
   			</div>
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">发布人姓名</label>
    			<div class="layui-input-inline">
      				<input type="text" name="opername" placeholder="请输入发布人姓名" autocomplete="off" class="layui-input">
    			</div>
   			</div>
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">开始时间</label>
    			<div class="layui-input-inline">
      				<input type="text" name="startTime" id="startTime" readonly="readonly" placeholder="yyyy-MM-dd HH-mm-ss"  class="layui-input">
    			</div>
   			</div>
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">结束时间</label>
    			<div class="layui-input-inline">
      				<input type="text" name="endTime" id="endTime" readonly="readonly" placeholder="yyyy-MM-dd HH-mm-ss"  class="layui-input">
    			</div>
   			</div>
   			</div>
   			
   			<div class="layui-form-item" align="center">
   			<div class="layui-inline">
    			<div class="layui-input-inline">
      				 <button class="layui-btn" lay-submit="" lay-filter="search"  id="search">搜索</button>
      				 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    			</div>
   			</div>	
   			</div>
   			
   		</form>
 	 </div>
</fieldset>
	<table id="notice" lay-filter="notice"></table>

<div>
	<div id="toolbar" style="display: none;">
		<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="add"  shiro:hasPermission="notice:create">添加公告</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">批量删除</button>
	</div>
	<div id="rowBtn" style="display: none;">
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="update" shiro:hasPermission="notice:update">更新</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete" shiro:hasPermission="notice:delete">删除</button>
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="show" shiro:hasPermission="notice:view">查看</button>
	</div>
</div>

<div style="display: none; padding: 20px" id="noticeadd" >
	<form action="" method="post" id="form" class = "layui-form-pane layui-form" lay-filter="form">
		<div class="layui-form-item">
    		<label class="layui-form-label">标题</label>
   			<div class="layui-input-block">
   				 <input type="hidden" name="id" id = "id">
     			 <input type="text" name="title" id="title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
   			</div>
  		</div>
  		
  		<div class="layui-form-item">
		    <label class="layui-form-label">公告内容</label>
		    <div class="layui-input-block">
		    	 <textarea class="layui-textarea" name="content" id="content"></textarea>
		    </div>
 	   </div>
 		
 		<div class="layui-form-item" >
    		<div class="layui-input-block" style="text-align: center;">
      			<button type="submit" class="layui-btn" lay-submit="" lay-filter="dosubmit">提交</button>
     			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
    		</div>
  		</div> 
	</form>
</div>

<div style="display: none; margin: 5px;padding: 5px; border:1px solid #999999; " id="showDiv" >
	<h1 align="center" id="showTitle"></h1>
	<br>
	<br>
	<div align="right">
	<label>发布人:</label><input type="text" id="opername" readonly="readonly">
	</div>
	<div align="right">
	<label>发布时间:</label><input type="text" id="createtime" readonly="readonly">
	</div>
	<br>
		<hr class="layui-bg-blue">
	<br>
	<div id="showContent"  style=" border:1px solid #999999; height: 200px">
		
	</div>
</div>


<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
	layui.use(["jquery","layer","form","table","laydate",'layedit'],function(){
		var $ = layui.jquery;
		var layer = layui.layer;	
		var form = layui.form;	
		var table = layui.table;	
		var laydate = layui.laydate;
		var layedit = layui.layedit;
		laydate.render({
			elem:"#startTime",
			type:"datetime"
		})
		laydate.render({
			elem:"#endTime",
			type:"datetime"
		})
		 
		//table 初始化开始
		var t = table.render({
			elem:"#notice",
			page:true,
			url:"/sys/notice/list",
			height: 'full-220',
			toolbar:"#toolbar",
			parseData:function(rs){
				if(rs.code != 200){
					layer.msg(rs.msg);
					return false;
				}
				 return {
				      "code": rs.code, //解析接口状态
				      "msg": rs.msg, //解析提示文本
				      "count": rs.data.count, //解析数据长度
				      "data": rs.data.data //解析数据列表
				    };
			},
			response:{
				statusCode: 200
			},
			cols:[ [
				 {type:'checkbox',fixed:"left"},
				 {field: 'id', title: 'ID', sort: true, fixed: 'left',align:"center"},
			     {field: 'title', title: '公告主题',align:"center"},
			     {field: 'createtime', title: '发布时间',sort: true,align:"center"},
			     {field: 'opername', title: '发布人',align:"center"},
			     { title: '操作',toolbar:"#rowBtn",align:"center"}
			] ]
		});
		//table 初始化结束
		form.on("submit(search)",function(d){
			t.reload({
				where:d.field,
				page:{
					curr:1
				}
			});	
			return false;
		});
		//头监听事件开始
		table.on('toolbar(notice)', function(obj){
			  var checkStatus = table.checkStatus(obj.config.id);
			  switch(obj.event){
			    case 'add':
			      layer.msg('添加');
			      add()
			    break;
			    case 'batchDelete':
			      batchDelete();
			    break;
			  };
		});
		//头监听事件结束
		
		//新增开始
		 var initlayedit;
		var layerIndex;
		var url;
		 function add(){
			layerIndex=layer.open({
				 	   type: 1, 
				 	   content: $('#noticeadd'),
				       title:"新增公告",
				       area:['900px','600px'],
				       cancel: function(index, layero){ 
				    	   if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
				    	     layer.close(index)
				    	   }
				    	   return true; 
				    	 } ,   
				       success: function(){
				    	    initlayedit = layedit.build('content');
					        $("#form")[0].reset();
					        layedit.setContent(initlayedit,'');
					        url="/sys/notice/add";
					      }
			      });
		     };
		//新增结束
		
		//监听弹出层form表单提交 开始
		form.on("submit(dosubmit)",function(d){
			//用于同步编辑器内容到textarea（一般用于异步提交） 
			layedit.sync(initlayedit);
			//对form表单进行序列化
			var data = $("#form").serialize();
			$.post(url,data,function(rs){
				if(rs.code == 200){
					t.reload();
				}
				layer.msg(rs.msg);
				layer.close(layerIndex);
			});
			return false;
		});
		//监听弹出层form表单提交 结束
		
		//批量删除开始
		function batchDelete(){
			var checkStatus = table.checkStatus('notice');	
			var length = checkStatus.data.length;//获取选中行的数据
			var data = checkStatus.data//获取选中行数量，可作为是否有选中行的条件
			if(length<1){
				layer.msg("至少选择一条数据");
				return false
			}
			layer.confirm('是否删除这些数据?', {icon: 3, title:'提示'}, function(index){
				  //do something
				var ids = '';
				$.each(data,function(index,value){
					if(index==0){
						ids+="ids="+value.id;
					}else{
						ids+="&ids="+value.id;
					}
					console.log(value);
				});
				console.log(ids);
				$.post("/sys/notice/batchDelete",ids,function(rs){
					if(rs.code==200){
						t.reload();
					}
						layer.msg(rs.msg);
				});
			 		 layer.close(index);
			});
		};
		//批量删除结束
		
		//行监听事件开始
		table.on('tool(notice)', function(obj){ 
			var data = obj.data;
			switch(obj.event){
				case 'update':
					update(data);
				break;
				case 'delete':
					deleteOne(data);
				break;
				case 'show':
					show(data);
				break;
			}
		});
		//行监听事件结束
		
		//跟新数据 开始
		function update(data){
			layerIndex = layer.open({
				   type: 1, 
			 	   content: $('#noticeadd'),
			 	   title:"修改公告",
			       area:['900px','600px'],
			       success: function(){
			    	    initlayedit = layedit.build('content');
				        $("#form")[0].reset();
				        console.log(data);
				    	$("#title").val(data.title);
				       	$("#id").val(data.id);
				      	/**form.render();
				      	form.val("form", {
				      		"title":data.title,
				      		 "id" : data.id
				      	});**/
				        layedit.setContent(initlayedit,data.content);
				        url="/sys/notice/update";
				  }
			});
		}
		
		//跟新数据 结束
		
		//删除单个数据 开始
		function deleteOne(data){
			var id = data.id;
			layer.confirm('是否删除该数据?', {icon: 3, title:'提示'}, function(index){
				$.post("/sys/notice/deleteOne",{"id":id},function(rs){
					if(rs.code == 200){
						t.reload();
					}	
					layer.msg(rs.msg);
				});
				layer.close(index);
			});
		};
		//删除单个数据 结束
		
		//查看公告内容 开始
		function show(data){
			layer.open({
				 type: 1, 
				 content: $('#showDiv'),
				  title:"查看公告",
				  area:['700px','500px'],
				  success: function(){
					  $("#showTitle").html(data.title);
					  $("#opername").val(data.opername);
					  $("#createtime").val(data.createtime);
					  $("#showContent").html(data.content);
				  }
			});
		}
		//查看公告内容 结束
	})
</script>
</body>
</html>